<template>
    <el-dialog v-model="addDialog" title="员工添加" width="800">
        <el-form :inline="true" class="demo-form-inline" ref="formRef" :rules="formRules" :model="formData">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="工号" label-width="80" :required="true" prop="staffNo">
                        <el-input autocomplete="off" v-model="formData.staffNo" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="真实姓名" label-width="80" :required="true" prop="realName">
                        <el-input autocomplete="off" v-model="formData.realName" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="密码" label-width="80" prop="password" >
                        <el-input autocomplete="off" v-model="formData.password" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="头像" prop="photoUrl">
                        <!--<el-input autocomplete="off" v-model="formData.photoUrl" />-->
                        <el-upload
                                style="border: 1px solid grey;width: 40px;height: 40px;"
                                class="avatar-uploader"
                                :action="axios.defaults.baseURL + '/file/upload'"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                        >
                            <img :src="formData.photoUrl" class="avatar" v-if="formData.photoUrl" alt=""/>
                            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="身份证号" label-width="80" :required="true" prop="idCard">
                        <el-input autocomplete="off" v-model="formData.idCard" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="性别" label-width="80" :required="true" prop="gender">
                        <el-radio-group autocomplete="off" v-model="formData.gender" placeholder="请选择你的性别">
                            <!--<el-option label="男" value="1" />
                            <el-option label="女" value="0" />-->
                            <el-radio value="1" label="男"></el-radio>
                            <el-radio value="0" label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机号码" label-width="80" :required="true" prop="phone">
                        <el-input autocomplete="off" v-model="formData.phone" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="出生日期" label-width="80" :required="true" prop="dateOfBirth">
                        <el-date-picker
                                autocomplete="off"
                                v-model="formData.dateOfBirth"
                                type="date" placeholder="选择日期"
                                size="default"
                                :editable="false"
                                format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD"
                                style="width: 100%;"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="组织ID" label-width="80" :required="true" style="width: 276px">
                        <!--<el-input autocomplete="off" v-model="formData.organizationId" />-->
                        <el-select autocomplete="off" v-model="formData.organizationId" placeholder="选择组织">
                            <el-option
                                    v-for="organization in organizationList"
                                    :label="organization.organizationName"
                                    :value="organization.id"
                                    :key="organization.id"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="岗位名称" label-width="80" :required="true" prop="jobName">
                        <el-input autocomplete="off" v-model="formData.jobName" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="入职日期" label-width="80" prop="joinDate">
                        <el-date-picker
                                autocomplete="off"
                                v-model="formData.joinDate"
                                type="date" placeholder="选择日期"
                                size="default"
                                :editable="false"
                                format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="薪资" label-width="80" :required="true" prop="salary">
                        <el-input autocomplete="off" v-model="formData.salary" />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="教育背景" style="width: 95%;" prop="educationBackground">
                        <el-input type="textarea" autocomplete="off" v-model="formData.educationBackground" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addDialog = false">关闭</el-button>
                <el-button @click="resetForm(formRef)">重置</el-button>
                <el-button @click="save(formRef)" type="primary">保存</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
    import {defineEmits, defineModel} from "@vue/runtime-core";
    import {reactive,ref} from "vue";
    import axios from '../../axios/index.js'
    import {ElMessage} from "element-plus";
    import {Plus} from "@element-plus/icons-vue";

    let addDialog = defineModel('addDialog')
    const emit = defineEmits(['loadData'])
    const formRef = ref()

    let formData = reactive({
        staffNo:null,
        password: '123456',
        gender: null,
        realName:null,
        idCard:null,
        phone:null,
        dateOfBirth:null,
        organizationId:null,
        jobName:null,
        salary:null,
        createBy:'1',
        educationBackground:null,
        photoUrl:null,
        joinDate:null,
        createTime:null,
        status:'1',
        pid:null

    })

    let organizationList = []

    //表单校验
    const formRules = reactive({
        staffNo: [{required:true,pattern: '^[a-zA-Z][a-zA-Z0-9]{5,9}$',message:'工号应为 6 位数字',trigger: 'blur'}],
        realName: [{required:true,min:'2',pattern:'^[\\u4e00-\\u9fa5]{2,10}$',message:'真实姓名格式不正确',trigger: 'blur'}],
        idCard: [{required:true,pattern:'(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)',message:'身份证号格式不正确',trigger: 'blur'}],
        gender: [{required:true, message: '性别不能为空',trigger: 'blur'}],
        phone: [{required:true,pattern:'^1\\d{10}$',message:'手机号码格式不正确',trigger: 'blur'}],
        dateOfBirth: [{required:true, message: '出生日期不能为空',trigger: 'blur' }],
        organizationId: [{required:true, message: '不能为空',trigger: 'blur' }],
        jobName: [{required:true, message: '不能为空',trigger: 'blur'}],
        salary: [{required:true,message:'薪资应为正数',trigger: 'blur'}]
    })

    //保存用户
    function save() {
        //console.log(formData)
        axios.post('/staff/addStaff', formData).then(resp=>{
            ElMessage({
                message: resp.data.message,
                type: 'success',
                duration: 1500,
                onClose: function () {
                    addDialog.value = false
                    emit('loadData')
                    //清除表单数据
                    formData = {}
                }
            })
        })
    }

    //获取组织列表
    axios.get('/organization/getList').then (resp=>{
        organizationList = resp.data.data
        //console.log(resp.data.data)
    })

    //上传头像
    function handleAvatarSuccess(response) {
        formData.photoUrl = response.message
        console.log(formData.photoUrl)
    }

    //重置表单校验
    const resetForm = (formEl) => {
        if (!formEl) return
        formEl.resetFields()
    }
</script>

<style scoped>
    .demo-form-inline{
        margin-left: 30px;
    }
    .demo-form-inline el-input{
        --el-input-width: 220px;
    }
    .demo-form-inline el-radio-group{
        --el-input-width: 220px;
    }
    .demo-form-inline el-date-picker{
        --el-input-width: 220px;
    }

    .avatar-uploader el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader el-upload:hover {
        border-color: var(--el-color-primary);
    }

    el-icon.avatar-uploader-icon {
        font-size: 20px;
        color: #8c939d;
        width: 40px;
        height: 40px;
        text-align: center;
    }
    .avatar-uploader .avatar {
        width: 40px;
        height: 40px;
        display: block;
    }
</style>